<script setup>
import {reactive} from "vue";
import {requestAllWares, requestGetUserOrder} from "@/api";

const storageGroup = reactive({
  userinfo:uni.getStorageSync("userInfo"),
})

const routerGroup = reactive({
  linkIndex() {
    uni.redirectTo({url: "../index/index"})
  },
  linkOrder() {
    uni.redirectTo({url: "../order/order"})
  },
  linkUser() {
    uni.redirectTo({url: "../user/user"})
  }
})

const orderGroup = reactive({
  baseUrl: "http://118.178.254.102:1251/",
  orderList:[],
  async getOrderList() {
    if (storageGroup.userinfo.login_state) {
      let result = await requestGetUserOrder({account: storageGroup.userinfo.account});
      if (result.statusCode === 200) {
        this.orderList = result.data;
        waresGroup.getWareList();
      }
    }
  }
})

const waresGroup = reactive({
  wares:[],
  wareList:[],
  getWareList(){
    for (let i = 0; i < orderGroup.orderList.length; i++){
      this.wareList.push({name:orderGroup.orderList[i].name.split("_").slice(0,-1),price:orderGroup.orderList[i].price,img:[]})
    }
    this.getWares();
  },
  async getWares(){
    let result = await requestAllWares();
    if (result.statusCode === 200) {
      this.wares = result.data;
      this.setWaresImg();
    }
  },
  setWaresImg(){
    for (let currentWare of this.wareList){
      for (let currentName of currentWare.name){
        for (let ware of this.wares){
          if (currentName === ware.name){
            currentWare.img.push(ware.img);
            break;
          }
        }
      }
    }
  }
})

orderGroup.getOrderList();
</script>

<template>
  <scroll-view scroll-y="true">
    <view class="container-box">
      <view class="main">
        <view class="item-list">
          <view class="item-box" v-for="(ware,index) of waresGroup.wareList" :key="index">
            <view class="item">
              <view class="item-title-box">
                <view class="item-title-img-box">
                  <img class="item-title-img" :src="orderGroup.baseUrl+'shop_head.jpg'" alt=""/>
                </view>
                <view class="item-title-text">
                  <text>HarryRestaurant</text>
                </view>
              </view>
              <view class="item-main-box">
                <van-row>
                  <van-col span="18">
                    <view class="item-main-left">
                      <scroll-view scroll-x="true" class="item-main-scroll">
                        <view class="item-main-img-box" v-for="(img,index) of ware.img" :key="index">
                          <img class="item-main-img" :src="orderGroup.baseUrl+img" alt=""/>
                        </view>
                      </scroll-view>
                    </view>
                  </van-col>
                  <van-col span="6">
                    <view class="item-main-right">
                      <text>￥{{ ware.price/100 }}</text>
                    </view>
                  </van-col>
                </van-row>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <van-row>
      <van-tabbar>
        <van-tabbar-item icon="home-o" @click="routerGroup.linkIndex">首页</van-tabbar-item>
        <van-tabbar-item icon="search" @click="routerGroup.linkOrder">订单</van-tabbar-item>
        <van-tabbar-item icon="friends-o" @click="routerGroup.linkUser">我的</van-tabbar-item>
      </van-tabbar>
    </van-row>
    <view class="message"></view>
  </scroll-view>
</template>

<style scoped src="../../css/order.css">

</style>
